<template>
  <el-card class="mt-10">
    <div class="sorts">
      <el-row>
        <el-col :span="3"><el-link @click="tabChange(1)" :underline="false">{{activeTab === 1 ? '综合排序' : '综合'}}</el-link></el-col>
        <el-col :span="3"><el-link @click="tabChange(2)" :underline="false">{{activeTab === 2 ? '销量由高到低' : '销量'}}</el-link></el-col>
        <el-col :span="3"><el-link @click="tabChange(6)" :underline="false" v-if="tag===6">{{activeTab === 6 ? '评价由高到低' : '评价'}}</el-link></el-col>
        <el-col :span="3"><el-link @click="tabChange(3)" :underline="false">{{activeTab === 3 ? '浏览量由高到低' : '浏览量'}}</el-link></el-col>
        <el-col :span="3"><el-link @click="tabChange(4)" :underline="false">{{activeTab === 4 ? '价格由高到低' : '价格'}}</el-link></el-col>
        <el-col :span="3"><el-link @click="tabChange(5)" :underline="false">{{activeTab === 5 ? '发布时间由近及远' : '发布时间'}}</el-link></el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {ref} from "vue";
const emits = defineEmits(['sort'])
defineProps(['tag'])
const activeTab = ref(1) //控制展开

// 点击tab
const tabChange = (index:any) => {
  activeTab.value = index
  emits('sort',index)
}
</script>

<style scoped>
.sorts{
  text-decoration: none;
}
</style>
